<template>
  <el-dialog :title="$t('common.tip.title')" :visible.sync="showState" :before-close="handleClose">
    <span>{{ $t('common.tip.deleteTip') }}</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">{{ $t('common.operate.cancel') }}</el-button>
      <el-button type="primary" :loading="deleteLoading" @click="handleSubmit">{{ $t('common.operate.sure') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'DeleteDialog',
  props: {
    deleteState: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    showState: {
      get: function() {
        return this.deleteState
      },
      set: function() {
      }
    },
    deleteLoading: {
      get: function() {
        return this.loading
      },
      set: function() {
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('change-delete', false)
    },
    handleSubmit() {
      this.$emit('delete-this')
    }
  }
}
</script>

<style scoped>

</style>
